<!DOCTYPE html>
<html lang="en">
<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="../css/employee.css">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
    <div id="employee" style="height: 100%;">

        <main>
            <div class="main-center">

                <div class="submit">
                    <el-row>
                        <el-button type="warning" @click="dialogVisible = true,title = '新增员工'">+新增员工</el-button>
                        <el-button type="primary">-删除员工</el-button>
                    </el-row>
<!--                    <input type="button" value="+新增员工" id="add" @click="add">-->
<!--                    <input type="button" value="-删除员工" id="del">-->
                </div>
                <div class="table">
                    <template>
                        <el-table
                                ref="multipleTable"
                                :data="employees"
                                tooltip-effect="dark"

                                style="width: 100%"
                                >
                            <el-table-column
                                    prop="name"
                                    label="员工姓名"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    label="账号"
                                    align="center">
                                <template slot-scope="scope">{{ scope.row.username }}</template>
                            </el-table-column>
                            <el-table-column
                                    prop="phone"
                                    label="手机号"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    prop="status"
                                    label="账号状态"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    label="操作"
                                    align="center">
                                <template slot-scope="scope">
                                    <el-link type="primary"  @click="handleEdit(scope.$index, scope.row)">编辑</el-link>
                                    <span style="padding: 3px">&nbsp;</span>
                                    <el-link type="danger" @click="handleDelete(scope.$index, scope.row)">
                                        {{ scope.row.status == "禁用"?"启用":"禁用" }}
                                    </el-link>
                                </template>

                            </el-table-column>
                        </el-table>

                    </template>
                </div>

            </div>
            <div class="page-info">
                <el-pagination
                        background
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="pageTool.pageNo"
                        :page-sizes="[5,10]"
                        :page-size="pageTool.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="pageTool.pageTotal">
                </el-pagination>
            </div>
        </main>
<!--        添加员工-->
        <el-dialog
                :title="title"
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose">
            <el-form ref="form" :model="employeeForm" label-width="100px">
                <el-form-item label="员工姓名">
                    <el-input v-model.trim="employeeForm.name"></el-input>
                </el-form-item>
                <el-form-item label="账号">
                    <el-input v-model.trim="employeeForm.username"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model.trim="employeeForm.password" show-password></el-input>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input v-model.trim="employeeForm.phone"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-select v-model="employeeForm.sex" placeholder="请选择性别">
                        <el-option label="男" value="男"></el-option>
                        <el-option label="女" value="女"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="身份证号码">
                    <el-input v-model.trim="employeeForm.idNumber"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-switch :active-value="'启用'" :inactive-value="'禁用'" v-model="employeeForm.status"></el-switch>
                </el-form-item>
                <el-form-item label="性别">
                    <el-select v-model="employeeForm.sex" placeholder="请选择性别">
                        <el-option label="男" value="男"></el-option>
                        <el-option label="女" value="女"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="角色">
                    <el-select v-model="employeeForm.role" placeholder="请选择角色">
                        <el-option
                                v-for="item in roleData"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button
                        @click="dialogVisible = false,
                        Object.keys(this.employeeForm).forEach(keys => (this.employeeForm[keys] = ''));">取 消
                </el-button>
                <el-button type="primary" @click="uri == 'put'?updateEmployee():onsubmit()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</body>
<script src="../js/vue.js"></script>
<script src="../js/axios.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    var employee = new Vue({
        el:"#employee",
        data:{
            employeeForm:{
                name:'',
                username:'',
                password:'',
                phone:'',
                sex:'',
                idNumber:'',
                status:1,
                role: "",
            },
            //角色信息
            roleData:[
                {
                    label:'管理员',
                    value:'admin',
                },
                {
                    label:'经理',
                    value:'manage',
                },
                {
                    label:'员工',
                    value:'employee',
                }
            ],
            employees:[],
            employee:{},
            masking:false,
            title:"新增员工",
            uri:"",
            dialogVisible: false,
            pageTool:{
                pageTotal:0,
                pageSize:5,
                pageNo:1
            },
            messageStyle:{
                message:'',
                offset:80,
            },
        },
        methods: {


            //更新
            updateEmployee(){
                axios.put("/rbac/employee",this.employeeForm)
                    .then(res => {
                        if (res.data.code == 401){
                            this.messageStyle.message = res.data.message;
                            this.$message(this.messageStyle);
                        }else if(res.data.code == 20031){
                            this.messageStyle.message = "修改成功";
                            this.selectAll();
                            this.$message.success(this.messageStyle);
                        }else {
                            this.messageStyle.message = "修改失败，请稍后重试";
                            this.$message.error(this.messageStyle);
                        }
                        this.dialogVisible = false;
                        this.uri = '';
                        Object.keys(this.employeeForm).forEach(keys => (this.employeeForm[keys] = ''));
                    })
                    .catch(err =>{
                        console.log(err);
                    })
            },

            //修改
            handleEdit(index, row) {
                console.log(index, row);
                this.title = '修改员工';
                this.dialogVisible = true;
                this.uri = "put"
                this.employeeForm = JSON.parse(JSON.stringify(row));

            },
            //禁用启用
            handleDelete(index, row) {
                // console.log(index, row);
                this.employee = JSON.parse(JSON.stringify(row));
                this.employee.status == '启用'?this.employee.status = 0:this.employee.status = 1;
                console.log(this.employee);
                axios.put("/rbac/employee",this.employee)
                    .then(res => {
                        if (res.data.code == 401){
                            this.messageStyle.message = res.data.message;
                            this.$message(this.messageStyle);
                        }else if(res.data.code == 20031){
                            this.selectAll();
                            this.$message.success({
                                message:res.data.data.status + '成功！！！',
                                offset:80
                            });
                        }else {
                            this.messageStyle.message = res.data.data.status + "失败";
                            this.$message.error(this.messageStyle);
                        }
                    })
                    .catch(err =>{
                        this.$message.error(this.messageStyle);
                        console.log(err);
                    })
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            //表格分页变化
            handleSizeChange(val) {
                // console.log(`每页 ${val} 条`);
                this.pageTool.pageSize = val;
                this.selectAll();
            },
            handleCurrentChange(val) {
                // console.log(`当前页: ${val}`);
                this.pageTool.pageNo = val;
                this.selectAll();
            },


            selectAll(){
                this.uri = "selectAll"

                that = this;

                axios.get('/rbac/employee/page',{
                    params:{
                        page:this.pageTool.pageNo,
                        pageSize: this.pageTool.pageSize,
                    }
                })
                    .then(res => {
                        this.messageStyle.message = res.data.message;
                        if (res.data.code == 401){
                            this.$message( this.messageStyle)
                        }
                        // console.log("ALL");
                        // console.log(res.data);
                        that.employees = res.data.data.records;
                        that.pageTool.pageTotal = res.data.data.total;
                    })
                    .catch(err => {
                        console.log(err);
                    })
            },

            onsubmit(e){
                that = this;

                if(this.employeeForm != null){
                    axios.post('/rbac/employee', this.employeeForm)
                    .then(res => {
                        this.messageStyle.message = res.data.message;
                        if (res.data.code == 20011){
                            this.$message.success(this.messageStyle)
                            this.dialogVisible = false;

                            that.selectAll();
                        }else {
                            this.$message.error(this.messageStyle);
                            this.dialogVisible = false;
                        }
                        Object.keys(this.employeeForm).forEach(keys => (this.employeeForm[keys] = ''));
                    })
                    .catch(err => {
                        console.error(err); 
                    })
                }
            },

        },
        mounted () {
           this.selectAll();
        },
    })
</script>

</html>